﻿<!DOCTYPE html>
<html>
<head>
    <title>Chart Test - Rapid SCADA</title>
    <link href="../plugins/Chart/css/chart.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #divChart {
            width: 100%;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../js/scada-common.js"></script>
    <script type="text/javascript" src="../plugins/Chart/js/chart-prereq.js"></script>
    <script type="text/javascript" src="../plugins/Chart/js/chart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let controlOptions = new scada.chart.ControlOptions();
            controlOptions.chartTitle = "Chart Test";
            controlOptions.chartStatus = "Status message";
            controlOptions.hasError = false;
            controlOptions.locale = "en-US";
            controlOptions.gapBetweenPoints = 6 * 3600 * 1000; // 6 hours

            // time range, UTC+3, Moscow time zone
            let timeRange = new scada.chart.TimeRange();
            timeRange.startTime = Date.UTC(2022, 3, 30, 21, 0, 0);
            timeRange.endTime = Date.UTC(2022, 4, 2, 21, 0, 0);

            let hourMap = timeRange.hourMap;
            hourMap.set(Date.UTC(2022, 03, 30, 21, 0, 0), "2022-05-01T00:00:00");
            hourMap.set(Date.UTC(2022, 04, 01, 03, 0, 0), "2022-05-01T06:00:00");
            hourMap.set(Date.UTC(2022, 04, 01, 09, 0, 0), "2022-05-01T12:00:00");
            hourMap.set(Date.UTC(2022, 04, 01, 15, 0, 0), "2022-05-01T18:00:00");
            hourMap.set(Date.UTC(2022, 04, 01, 21, 0, 0), "2022-05-02T00:00:00");
            hourMap.set(Date.UTC(2022, 04, 02, 03, 0, 0), "2022-05-02T06:00:00");
            hourMap.set(Date.UTC(2022, 04, 02, 09, 0, 0), "2022-05-02T12:00:00");
            hourMap.set(Date.UTC(2022, 04, 02, 15, 0, 0), "2022-05-02T18:00:00");
            hourMap.set(Date.UTC(2022, 04, 02, 21, 0, 0), "2022-05-03T00:00:00");

            // time points
            let chartData = new scada.chart.ChartData();
            chartData.timePoints = [
                [Date.UTC(2022, 03, 30, 21, 0, 0), "2022-05-01T00:00:00"],
                [Date.UTC(2022, 04, 01, 03, 0, 0), "2022-05-01T06:00:00"],
                [Date.UTC(2022, 04, 01, 09, 0, 0), "2022-05-01T12:00:00"],
                [Date.UTC(2022, 04, 01, 15, 0, 0), "2022-05-01T18:00:00"],
                [Date.UTC(2022, 04, 01, 21, 0, 0), "2022-05-02T00:00:00"],
                [Date.UTC(2022, 04, 02, 03, 0, 0), "2022-05-02T06:00:00"],
                [Date.UTC(2022, 04, 02, 09, 0, 0), "2022-05-02T12:00:00"],
                [Date.UTC(2022, 04, 02, 15, 0, 0), "2022-05-02T18:00:00"],
                [Date.UTC(2022, 04, 02, 21, 0, 0), "2022-05-03T00:00:00"]];

            // trends
            let trend1 = new scada.chart.Trend();
            trend1.cnlNum = 1;
            trend1.cnlName = "Channel 1";
            trend1.quantityID = 1;
            trend1.quantityName = "Voltage";
            trend1.unitName = "V";
            trend1.points =
                [[0, 12, "0"], [1, 12, "1"], [5, 1, "5"], [2.5, 1, "2,5"],
                [2.5, 1, "2,5"], [7, 14, "7"], [7.5, 14, "7.5"], [6.7, 1, "6,7"], [8, 14, "8"]];

            let trend2 = new scada.chart.Trend();
            trend2.cnlNum = 2;
            trend2.cnlName = "Channel 2";
            trend2.points =
                [[3, 1, "Three"], [0, 1, "Zero"], [0, 0, "---"], [1, 1, "One"],
                [2, 1, "Two"], [5, 1, "Five"], [4, 1, "Four"], [5, 1, "Five"], [3, 1, "Three"]];
            chartData.trends = [trend1, trend2];

            // channel statuses
            chartData.cnlStatusMap.set(0, new scada.chart.CnlStatus(0, "Undefined", "Black"));
            chartData.cnlStatusMap.set(1, new scada.chart.CnlStatus(1, "Defined", "Black"));
            chartData.cnlStatusMap.set(12, new scada.chart.CnlStatus(12, "Low", "DeepSkyBlue"));
            chartData.cnlStatusMap.set(14, new scada.chart.CnlStatus(14, "High", "Orange"));

            let chart = new scada.chart.Chart("divChart");
            chart.controlOptions = controlOptions;
            chart.timeRange = timeRange;
            chart.chartData = chartData;
            chart.buildDom();
            chart.draw();
            chart.bindHintEvents();

            $(window).resize(function () {
                chart.draw();
            });
        });
    </script>
</head>
<body>
    <div id="divChart" class="chart"></div>
</body>
</html>
